<template>
  <CardVue height="1.7rem" title="党建工作" style="margin-bottom: 0.3rem">
    <div class="grid">
      <div
        class="grid-item"
        @click="open({ title: '应成立党组织', query: { examineYear } }, cldzu)"
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">应成立党组织</div>
          <div class="grid-item-r-tx">
            {{ info['应该成立党组织'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
      <div
        class="grid-item"
        @click="
          open({ title: '已成立党组织', query: { examineYear } }, yjcldzu)
        "
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">已成立党组织</div>
          <div class="grid-item-r-tx">
            {{ info['已经成立党组织'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
      <div
        class="grid-item"
        @click="
          open({ title: '未成立党组织', query: { examineYear } }, yjcldzuc)
        "
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">未成立党组织</div>
          <div class="grid-item-r-tx">
            {{ info['未成立党组织'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
      <div
        class="grid-item"
        @click="
          open({ title: '应配备党建联络员', query: { examineYear } }, ygpblly)
        "
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">应配备党建联络员</div>
          <div class="grid-item-r-tx">
            {{ info['应该配备联络员'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
      <div
        class="grid-item"
        @click="
          open({ title: '已配备党建联络员', query: { examineYear } }, ypblly)
        "
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">已配备党建联络员</div>
          <div class="grid-item-r-tx">
            {{ info['已经配备联络员'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
      <div
        class="grid-item"
        @click="
          open({ title: '未配备党建联络员', query: { examineYear } }, wpblly)
        "
      >
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d8.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">未配备党建联络员</div>
          <div class="grid-item-r-tx">
            {{ info['未配备联络员'] ?? 0 }}
            <span>家</span>
          </div>
        </div>
      </div>
    </div>
  </CardVue>
  <PopupVue ref="PopupVueRef" />
</template>
<script setup lang="ts">
import CardVue from '@/views/largeScreen/components/card/card.vue'
import { onMounted, ref } from 'vue'
import {
  check,
  yjcldzu,
  cldzu,
  yjcldzuc,
  ygpblly,
  ypblly,
  wpblly
} from '@/api/spotCheck/spotCheck'
import PopupVue from './popup.vue'

const info = ref<Record<string, string>>({})
onMounted(() => {
  check().then((res) => {
    info.value = res.data.data
  })
})

const year = new Date().getFullYear()

const examineYear = ref(year - 1)

const PopupVueRef = ref<InstanceType<typeof PopupVue> | null>(null)

const open = (query, http) => {
  console.log('点击了')
  PopupVueRef.value?.show(query, http)
}
</script>

<style scoped lang="scss">
.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  box-sizing: border-box;
  padding: 10px 0;
  .grid-item {
    width: 100%;
    display: flex;

    .grid-item-img {
      width: 0.5rem;
      height: 0.5rem;
      background: url(@/assets/imgs/largeScreen/icon/d7.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      img {
        width: 0.25rem;
        height: 0.25rem;
      }
    }
    .grid-item-r {
      flex: 1;
      margin-left: 0.1rem;
      .grid-item-r-title {
        color: rgba(255, 255, 255, 0.647058823529412);
        font-size: 0.13rem;
        font-family: Arial;
        font-weight: 400;
        margin-bottom: 0.05rem;
      }
      .grid-item-r-tx {
        color: #fff;
        font-size: 0.2rem;
        font-family: Arial;
        font-weight: 700;
        span {
          color: rgba(255, 255, 255, 0.647058823529412);
          font-size: 0.15rem;
        }
      }
    }
  }
}
</style>
